// FlatList - 高性能列表组件
// FlatList 是一个高性能的列表组件，适用于长列表数据的展示。
// data属性 - 用于指定数据源 ，renderItem：从data中获取一个项目并将其渲染到列表中。
/* 
  ● 跨平台支持
  ● 支持水平布局
  ● 支持头部和尾部组件
  ● 支持下拉刷新
  ● 支持上拉加载
  ● 支持多列布局
  ● 支持列表项分隔线
*/

import { FlatList, StyleSheet, Text, View } from 'react-native';
export default function App() {
  const list = [
    {
      id: 1,
      title: '马云',
    },
    {
      id: 2,
      title: '马化腾',
    },
    {
      id: 3,
      title: '刘强东',
    },
  ];
  interface ItemProps {
    id: number;
    title: string;
  }
  const Item = ({ title, id }: ItemProps) => {
    return <Text key={id}>{title}</Text>;
  };
  return (
    <View>
      <FlatList
        data={list}
        renderItem={({ item }) => <Item id={item.id} title={item.title}></Item>}
        keyExtractor={(item) => item.id.toString()}
      ></FlatList>
    </View>
  );
}
const styles = StyleSheet.create({});
